<template>
  <div>
    <div class="user-area">
      <div class="top-area">
        <el-row>
          <el-button @click="newNews"
                     size="small"
                     type="primary">新建资讯</el-button>
        </el-row>
      </div>
      <div class="title">
        <div class="point"></div>
        <span>资讯</span>
      </div>
      <template>
        <news-card :news-collection="newsCollection"
                   @newsModify="newsModify"
                   @newsDeleted="newsDeleted"
                   @newsDetail="newsDetail"></news-card>
      </template>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               :pageSize=2
               @change="pageChange"></view-page>
  </div>
</template>

<style lang="scss">
.top-area {
  padding: 10px 5px;
}
</style>

<script>
import '@/style/info.scss'
import '@/style/common.scss'
import newsCard from '@/components/news-card'
import viewPage from '@/components/pagination'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { api } from '@/api'

export default {
  data() {
    return {
      currentPage: 1,
      total: 1,
      newsCollection: []
    }
  },
  components: { newsCard, viewPage },
  activated() {
    this.getNewsCollection()
  },
  methods: {
    getNewsCollection() {
      const params = {
        pageNum: this.currentPage,
        pageSize: 2
      }
      this.$http.post(api.SYS_NEWS_LIST, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.currentPage = res.data.pageNum
            this.total = res.data.totalSize
            this.newsCollection = res.data.newsList
          } else {
            this.$msg._message(res.data.msg, 'error')
          }
        }
      )
    },
    newsDetail(id) {
      this.$router.push({
        name: 'newsDetail',
        params: { newsId: id }
      })
    },
    newNews() {
      this.$router.push({
        name: 'newNews'
      })
    },
    newsModify(id) {
      this.$router.push({
        name: 'modifyNews',
        params: { newsId: id }
      })
    },
    newsDeleted(id) {
      this.$http._get(api.SYS_NEWS_DEL, id).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('操作成功', 'success')
            this.getNewsCollection()
          } else {
            this.$msg._message(res.data.msg, 'error')
          }
        }
      )
    },
    pageChange(page) {
      this.currentPage = page
      this.getNewsCollection()
    }
  }
}
</script>

